<template>
	<view class="flex-col">
		<up-image :src="url" width="80px" height="80px"></up-image>
		<u-button style="width: 200rpx" type="success" shape="circle" text="点击签名" @click="show=true"></u-button>
		<u-popup :show="show" @close="show=false" @open="show=true" mode="center"
			customStyle="height:800rpx;width:100%">
			<view style="width: 100% ;height: 95%;">
				<l-signature disableScroll ref="signatureRef"></l-signature>
			</view>
			<view class="flex">
				<up-button style="width: 200rpx" shape="circle" text="清空"
					color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
					@click="onClick('clear')"></up-button>
				<up-button style="width: 200rpx" shape="circle" text="撤销"
					color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
					@click="onClick('undo')"></up-button>
				<up-button style="width: 200rpx" shape="circle" text="保存"
					color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
					@click="onClick('save')"></up-button>
			</view>
		</u-popup>
	</view>

</template>
<script setup>
	import {
		ref,
	} from 'vue';
	import {
		apiBaseURL
	} from '@/config/index.js';
	// import {
	// 	rdfileDataUpload
	// } from '@/api/public.js'
	// import {
	// 	base64ToFile
	// } from '@/utils/index.js'

	const props = defineProps({
		url: {
			type: String
		}
	});
	const emits = defineEmits(['getId', 'getUrl']);

	const signatureRef = ref(null)
	const show = ref(false)
	// const url = ref()

	const onClick = (type) => {
		if (type == 'save') {
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名
					// console.log(res.isEmpty)

					const formdata = new FormData()
					// formdata.append('file', base64ToFile(res.tempFilePath))
					formdata.append('file', res.tempFilePath)
					uni.uploadFile({
						url: apiBaseURL + '/rdfile/data/upload',
						// filePath: tempFilePaths[0],
						name: 'file',
						formData: formdata,
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
						},
						success: (res) => {
							if (res?.data) {
								const val = JSON.parse(res.data)
								show.value = false
								emits('getId', val.data.id)
							}
						}
					});

					// 生成图片的临时路径
					// H5 生成的是base64
					// url.value = res.tempFilePath
					emits('getUrl', res.tempFilePath)
					// console.log(res.tempFilePath);
				}
			})
			return
		}
		if (signatureRef.value)
			signatureRef.value[type]()
	}
</script>
<style>
</style>